{% load static %}
<!DOCTYPE html>
<html lang="en">  
<head>
    <link href="{% static 'css/attend.css' %}" rel="stylesheet" type="text/css" />
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>员工考勤管理</title>

{#    <script>  #}
{#        window.onload = function() {  #}
{#            // 获取提交按钮  #}
{#            var submitButton = document.querySelector('#submitButton');  #}
{#            // 为提交按钮添加点击事件监听器  #}
{#            submitButton.addEventListener('click', function(event) {  #}
{#                // 阻止表单默认的提交行为  #}
{#                event.preventDefault();  #}
{#                // 弹出确认框  #}
{#                if (confirm('你确定要提交吗？')) {  #}
{#                    // 如果用户点击“确定”，则跳转到另一个页面  #}
{#                    window.location.href = 'index.html'; // 替换为你要跳转到的页面的URL  #}
{#                } else {  #}
{#                    // 如果用户点击“取消”，则不执行任何操作  #}
{#                    alert('取消提交。');  #}
{#                }  #}
{#            });  #}
{#        };  #}
{#    </script>#}
</head>
{% include 'head.html' %}
<body>
    <div class="header">  
        <!-- 页面的上面部分 -->  
        <h1 style="padding-top: 20px;padding-left: 20px;margin-top: 0px;">员工考勤管理</h1>
    </div>
    <div class="container">
        <div class="left">  
            <!-- 页面的左边部分 -->  
            <ul>
                <li><a href="{% url 'attend_sign_in' %}" class="home-button">签到</a></li>
                <li><a href="{% url 'attend_sign_out' %}" class="home-button">签退</a></li>
                <li><a href="{% url 'attend_message' %}" class="home-button">查看考勤记录</a></li>
            </ul>  
        </div>
        <div class="right">
            <!-- 页面的右边部分 -->  
            <table id="attendanceTable">  
                <thead>  
                    <tr>
{#                        <th>员工号</th>#}
{#                        <th>员工姓名</th>#}
                        <th>考勤状态</th>  
                        <th>签到时间</th>  
                        <th>签退时间</th>  
                    </tr>  
                </thead>  
                <tbody>  
                    {% for m in message %}
                    <tr>
{#                        <td>{{ m.attend_id }}</td>#}
{#                        <td>{{ m.attend_name }}</td>#}
                        <td>{{ m.attend_statu }}</td>
                        <td>{{ m.attend_stime }}</td>
                        <td>{{ m.attend_etime }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table> 
{#            <form method="post">  #}
{#                <div class="input-container">  #}
{#                    <input type="text" class="input-box" id="input1" name="input1" placeholder="员工号">  #}
{#                </div>  #}
{#                <div class="input-container">  #}
{#                    <input type="text" class="input-box" id="input2" name="input2" placeholder="员工姓名">  #}
{#                </div>  #}
{#                <div class="input-container">  #}
{#                    <input type="text" class="input-box" id="input3" name="input3" placeholder="考勤状态">  #}
{#                </div>  #}
{#                <div class="input-container">  #}
{#                    <input type="text" class="input-box" id="input4" name="input4" placeholder="签到时间">  #}
{#                </div>  #}
{#                <div class="input-container">  #}
{#                    <input type="text" class="input-box" id="input5" name="input5" placeholder="签退时间">  #}
{#                    <input type="button" id="submitButton" value="修改">#}
{#                </div>#}
{#            </form>#}
        </div> 
    </div>
</body>  
</html>